<template>
  <view class="news-list-page">
    <view class="page-title">新闻列表</view>
    <!-- 用v-for遍历新闻数组，渲染组件 -->
    <TopNewsCard 
      v-for="(item, index) in newsArr" 
      :key="index" 
      :news="item" 
    />
  </view>
</template>

<script>
// 引入自定义组件（路径正确，因为components在根目录）
import TopNewsCard from "@/components/TopNewsCard.vue";

export default {
  components: {
    TopNewsCard // 注册组件
  },
  data() {
    return {
      // 新闻数据数组
      newsArr: [
        {
          isTop: true,
          title: "2024全国科普日活动本周六启动，50+场馆免费开放",
          desc: "今年科普日以“科学赋能未来”为主题，涵盖航天科技展、机器人互动体验等12项活动，全市科技馆、博物馆等50余家场馆将免费向公众开放。",
          time: "2024-10-29 08:15",
          source: "市科学技术协会"
        },
        {
          isTop: true,
          title: "主城区多条公交线路调整，新增3条快速直达专线",
          desc: "为缓解早晚高峰拥堵，11月1日起，10路、23路等5条公交线路优化绕行，同时新增从城东片区到CBD的3条快速专线，全程耗时缩短约20分钟。",
          time: "2024-10-28 16:40",
          source: "市交通运输局"
        },
        {
          isTop: false,
          title: "非遗文化进社区：传统剪纸艺术体验活动明晚举办",
          desc: "社区联合非遗传承人开展剪纸教学，居民可免费参与，现场还将展示100余幅传统剪纸作品，感受民间艺术魅力。",
          time: "2024-10-28 10:30",
          source: "街道办事处"
        },
        {
          isTop: false,
          title: "本地原创动画《古城奇遇记》获国际动画节提名",
          desc: "以本地历史文化为背景的原创动画短片，讲述少年穿越古城探索历史的故事，近日入围国际青少年动画节“最佳文化传承奖”。",
          time: "2024-10-27 15:20",
          source: "市文化创意产业协会"
        }
      ]
    };
  }
};
</script>

<style scoped>
.news-list-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 15rpx 0;
}
.page-title {
  font-size: 32rpx;
  font-weight: bold;
  padding: 20rpx 30rpx;
  background-color: #fff;
  margin-bottom: 15rpx;
}
</style>